<template>
  <el-drawer
    title="字段名列表"
    size="60%"
    :visible.sync="drawerVisible"
    direction="rtl"
    :close-on-press-escape="false"
    :wrapperClosable="false"
    :destroy-on-close="true"
    :before-close="clearDialog"
    custom-class="tag-drawer tagtable-field-drawer"
    v-drawerResize
  >
    <div class="drawer-wrap">
      <div class="drawer-content tag-scrollbar">
        <tag-content-header search refresh @toolFun="toolFun" :settingData="columns">
          <template #title>
            <span>{{ tableNm }} --- 字段名列表</span>
          </template>
        </tag-content-header>
        <tag-table
          ref="table"
          @refresh="getList"
          :data="dataList"
          :loading="loading"
          :columns="columns"
          :params="params"
          :total="totalSize"
        >
          <template #pk="{ scope }">
            {{ scope.row.pk ? '是' : '否' }}
          </template>
        </tag-table>
      </div>
    </div>
    <div class="drawer-btns">
      <el-button @click="clearDialog">关闭</el-button>
    </div>
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      drawerVisible: false,
      plfmId: '',
      dbNm: '',
      tableNm: '',
      dataList: [],
      columns: [
        {
          show: true,
          label: '字段名称',
          prop: 'fieldNm',
          search: true,
          searchKey: ''
        },
        {
          show: true,
          label: '字段类型',
          prop: 'fieldType',
          align: 'center'
        },
        {
          show: true,
          label: '取值类型',
          prop: 'valueType',
          dict: 'value_type',
          search: true,
          searchKey: '',
          align: 'center'
        },
        {
          show: true,
          label: '是否主键',
          prop: 'pk',
          align: 'center'
        },
        {
          show: true,
          label: '备注',
          prop: 'comment',
          align: 'center'
        }
      ],
      params: {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      },
      totalSize: 0
    }
  },
  methods: {
    showDrawer(data) {
      this.plfmId = data.plfmId
      this.dbNm = data.dbNm
      this.tableNm = data.tableNm
      this.drawerVisible = true
      this.getList()
    },
    toolFun(operation) {
      switch (operation) {
        case 'add':
          this.handleEdit('add', { tableType: this.tableType })
          break
        case 'search':
          // 搜索动作
          this.$refs['table'].searchToggle()
          break
        case 'refresh':
          // 刷新动作
          this.getList()
          break
      }
    },
    getList() {
      this.loading = true
      this.params.queryParams.plfmId = this.plfmId
      this.params.queryParams.dbName = this.dbNm
      this.params.queryParams.tableNm = this.tableNm
      this.$ajax({
        url: this.$ajax.setUrl('mta/mtaData/fieldPage'),
        method: 'get',
        params: this.$ajax.setParams(this.params)
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = data.data.records
          this.totalSize = data.data.totalSize
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    clearDialog() {
      this.plfmId = ''
      this.dbNm = ''
      this.tableNm = ''
      this.dataList = []
      this.params = {
        ascs: [],
        descs: [],
        currentPageNum: 1,
        pageSize: 10,
        queryParams: {},
        descPriority: false
      }
      this.drawerVisible = false
    }
  }
}
</script>

<style lang="scss"></style>
